<template>
  <swiper
    :modules="modules"
    :slidesPerView="slidesPerView"
    :space-between="spaceBetween"
    :navigation="navigationOption"
    :breakpoints="breakpoints"
    :pagination="pagination"
    :autoplay="autoplay"
    :loop="loop"
    :clickable="clickable"
    :freeMode="freeMode"
    :grabCursor="grabCursor"
    :speed="speed"
    :effect="effect"
  >
    <swiper-slide v-for="(item, index) in dataList" :key="index">
      <client-only>
        <slot name="content" :item="item"></slot>
        </client-only>
    </swiper-slide>
    <slot name="pagination"></slot>
  </swiper>
</template>

<script>
import { Navigation, Pagination, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/bundle";

export default {
  props: {
    dataList: {
      required: true,
      default: () => [],
    },
    breakpoints: {
      type: Object,
      default: {
        320: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        960: {
          slidesPerView: 3,
          spaceBetween: 30,
        },
      },
    },
    SliderContainerClass: {
      type: String,
      default: "",
    },
    pevIdentifier: {
      type: String,
      default: "#swiper-back",
    },
    nextIdentifier: {
      type: String,
      default: "#swiper-forward",
    },
    slidesPerView: {
      type: Number,
      default: 1,
    },
    loop: {
      type: Boolean,
      default: false,
    },
    clickable: {
      type: Boolean,
      default: false,
    },
    freeMode: {
      type: Boolean,
      default: false,
    },
    grabCursor: {
      type: Boolean,
      default: false,
    },
    autoplay: {
      type: Object,
      default: {
        delay: 3500,
        disableOnInteraction: false,
      },
    },
    pagination: {
      type: [Object, Boolean],
      default: false,
    },
    spaceBetween: {
      type: [Number, String],
      default: 24,
    },
    speed: {
      type: [Number, String],
      default: 2000,
    },
    effect: {
      type: String,
      default: "",
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {
      modules: [Navigation, Pagination, Autoplay],
    };
  },
  data() {
    return {
      navigationOption: {
        nextEl: this.nextIdentifier,
        prevEl: this.pevIdentifier,
      },
    };
  },
};
</script>